<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>

        /* 可用状态 */

        input:enabled{
            /* background: red; */
        }

        /* 非可用选择上去 */
        input:disabled{
            background: rebeccapurple;
            color: white;

        }

        /* focus 聚焦焦点会匹配此选择器 */
        input:focus{
            /* background: blue; */

        }

        /* 选中的样式 */
        input:checked{
            background-color: yellow;
        }

        input[type=checkbox]{
            /* 去掉默认样式 */
            appearance: none;
            width: 20px;
            height: 20px;
            border: 1px solid royalblue;
    
        }
        /* 选中之后的内容 */
        p::selection{
            background-color: rebeccapurple;
            color: red;
        }

    </style>

</head>
<body>
    

        <form action="">


        用户名：<input type="text" name="" id=""> <br>
        密码<input type="password" name="" id=""> <br>


        记住用户名密码：<input type="checkbox" name="" id=""> <br>


        <input type="submit" name="" id="" disabled>
            
        </form>

        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint modi odio sunt quibusdam eius esse vitae quod velit debitis doloribus non dicta culpa, adipisci recusandae magnam explicabo unde error ab.
        </p>

</body>
</html>